<template>
    <div class="shouye">
        <n-radio-group size="small" v-model:value="icon_type" class="radiobuttclass" name="radiobuttongroup1">
            <n-radio-button v-for="song in songs" :key="song.date_type" :value="song.date_type" :label="song.label" />
        </n-radio-group>
        <n-space class="routerDater">
            <n-space vertical class="cnjgher" v-for="(item, index) in meta" :key="index">
                <div class="title">{{ item.index_display }}</div>
                <n-input-number
                    v-model:value="initDslpData[icon_type][item.index_name][`${item.index_name}_index_value`].index_values.value.value"
                    placeholder="请输入" size="small" />
                <n-space align="center">
                    <span>较之前</span>
                    <n-radio-group size="small"
                        v-model:value="initDslpData[icon_type][item.index_name][`${item.index_name}_index_value`].index_values.out_period_ratio.reduTupe"
                        class="radiobuttclass" name="radiobuttongroup1">
                        <n-radio-button v-for="song in songsse" :key="song.value" :value="song.value"
                            :label="song.label" />
                    </n-radio-group>
                    <n-input-number
                        v-model:value="initDslpData[icon_type][item.index_name][`${item.index_name}_index_value`].index_values.out_period_ratio.value"
                        placeholder="请输入" size="small" />
                </n-space>
            </n-space>

        </n-space>
        <EchaBox />
        <n-space>
            <n-button strong secondary type="success" @click="subSaveDataInStorege">
                保存
            </n-button>
            <n-switch size="small" v-model:value="initDslpData.show" />
        </n-space>
    </div>
</template>

<script lang="ts" setup>
import { ref, inject } from "vue";
import { NRadioGroup, NRadioButton, NInputNumber, NSpace, NButton, NSwitch } from "naive-ui"
import { meta } from '../../../dataConfig/initPageData'
import EchaBox from './echaBox.vue'

const { initDslpData, savaDataInStorege } = inject('initDslpData') as any

const icon_type = ref("1")

const songsse = [{
    value: '17',
    label: '升'
}, {
    value: '0',
    label: '平'
}, {
    value: '18',
    label: '下降'
}]
const songs = [{
    date_type: "1",
    label: "实时"
},
{
    date_type: "20",
    label: "近1天"
},
{
    date_type: "21",
    label: "近7天"
},
{
    date_type: "23",
    label: "近30天"
},
{
    date_type: "100",
    label: "大促"
}]

function subSaveDataInStorege() {
    // console.log('保存修改', initDslpData.value)
    Object.keys(initDslpData.value).forEach((key: any) => {
        // savaDataInStorege(item, initDslpData.value[item])
        // console.log('item', initDslpData.value[key])
        Object.keys(initDslpData.value[key]).forEach((item: any) => {
            console.log('item', initDslpData.value[key][item][`${item}_index_value`])

            const uptype = initDslpData.value[key][item][`${item}_index_value`].index_values.out_period_ratio.reduTupe
            const value = initDslpData.value[key][item][`${item}_index_value`].index_values.out_period_ratio.value
            if (uptype === '0') {
                initDslpData.value[key][item][`${item}_index_value`].index_values.out_period_ratio.unit = 6
                delete initDslpData.value[key][item][`${item}_index_value`].index_values.out_period_ratio.value
            }
            if (uptype === '17') {
                // 统一转为正数
                initDslpData.value[key][item][`${item}_index_value`].index_values.out_period_ratio.unit = 4
                initDslpData.value[key][item][`${item}_index_value`].index_values.out_period_ratio.value = Math.abs(Number(value))
            }
            if (uptype === '18') {
                initDslpData.value[key][item][`${item}_index_value`].index_values.out_period_ratio.unit = 4
                initDslpData.value[key][item][`${item}_index_value`].index_values.out_period_ratio.value = Math.abs(Number(value)) * -1
            }
            initDslpData.value[key][item][`${item}_index_values`] = initDslpData.value[key][item][`${item}_index_value`]
        })



    })

    savaDataInStorege('initDslpData', initDslpData.value)
}

</script>

<style lang="scss" scoped>
.shouye {
    .radiobuttclass {
        margin: 10px 0;
    }

    .routerDater {
        .cnjgher {
            width: 200px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            margin: 10px 0;


        }
    }
}
</style>
